<script lang="ts" setup>
import { userStore } from '@/store/user'
import { SwitchButton } from '@element-plus/icons-vue'
const { userInfo } = userStore()
const activeIndex = ref('/home')
const router = useRouter()
const handleSelect = (key: string) => {
  const staticKey = ['logo', 'user']
  if (staticKey.includes(key)) {
    activeIndex.value = '/home'
    if (key === 'user') {
      localStorage.removeItem('token')
      router.push('/login')
    }
    return
  }
  router.push(key)
}

const route = useRoute()
onMounted(() => {
  activeIndex.value = route.path
})
</script>

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    :ellipsis="false"
  >
    <el-menu-item index="logo">
      <img
        style="width: 100px"
        src="/element-plus-logo.svg"
        alt="Element logo"
      />
    </el-menu-item>
    <el-menu-item index="/app/index">大屏</el-menu-item>
    <el-menu-item index="/app/about">关于</el-menu-item>
    <el-menu-item index="user">
      {{ userInfo.userName }}
      <el-icon><SwitchButton /></el-icon>
    </el-menu-item>
  </el-menu>
  <div class="app-content">
    <router-view />
  </div>
</template>

<style lang="scss" scoped>
.el-menu-demo {
  height: 60px;
  overflow: hidden;
}
.app-content {
  height: calc(100vh - 60px);
  background-color: #f0f2f5;
  overflow: hidden;
}
.el-menu--horizontal > .el-menu-item:first-child {
  margin-right: 100px;
}
.el-menu--horizontal > .el-menu-item:last-child {
  margin-left: auto;
}
</style>
